<template>
  <div class="login-main base-main">
    <div class="title text-c">
      <img src="../../assets/img/logo.png" alt="sofo-logo">
      <p class="color333 fs16 title-text">
        <img src="../../assets/img/img_login_line.png" alt="">
        索弗，轻松享未来
        <img src="../../assets/img/img_login_line.png" alt="">
      </p>
    </div>

    <div class="login-box">
      <!--选择登陆方式-->
      <ul class="text-c w80 flex">
        <li
          @click="handleLoginType(1)"
          :class="loginType == 1 ? 'active' : ''"
          class="pr fs15 ">
          验证码登录
        </li>
        <li
          @click="handleLoginType(2)"
          :class="loginType == 2 ? 'active' : ''"
          class="pr fs15">
          账号登录
        </li>
      </ul>
      <!--验证码登录-->
      <div class="centent" v-if="loginType == 1">
        <p class="color333 fs12 sub-title">注册手机号</p>
        <p class="line-bottom input-p fs15 w100">
          <span class="inline-block w10">+86</span>
          <span class="inline-block w80">
          <input v-model="phoneNum" class="w100 phone" type="number" placeholder="请输入手机号"/>
        </span>
        </p>
        <p class="color333 fs12 sub-title">验证码</p>
        <p class="line-bottom input-p fs15 w100">
        <span class="inline-block">
          <input v-model="code" type="number" class="code-input" placeholder="请输入验证码"/>
          <span class="flr color3D7EFF">获取验证码</span>
        </span>
        </p>
      </div>
      <!--账号登录-->
      <div class="centent" v-if="loginType == 2">
        <p class="color333 fs12 sub-title">手机号</p>
        <p class="line-bottom input-p fs15 w100">
          <span class="inline-block w10">+86</span>
          <span class="inline-block w80">
          <input v-model="phoneNum" class="w100 phone" type="number" placeholder="请输入手机号"/>
        </span>
        </p>
        <p class="color333 fs12 sub-title">密码</p>
        <p class="line-bottom input-p fs15 w100">
          <input v-model="pwd" class="w100" type="password" placeholder="请输入密码"/>
        </p>
        <p class="fs12 options">
          <span class="color666 fll" @click="toPage('forgetPwdAuthentication')">忘记密码？</span>
          <span class="color3D7EFF flr" @click="toPage('register')">立即注册</span>
        </p>
      </div>
    </div>

    <p class="btn-register">
      <span class="base-btn fs15" @click="haneldRegister">{{btnText}}</span>
    </p>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        loginType: 1, // 登陆方式，1 验证码，2 账号
        phoneNum: '', // 手机号
        code: '', // 验证码
        pwd: '', // 密码
        btnText: '注册并登陆',
      }
    },
    methods: {
      // 选择登陆方式
      handleLoginType(type) {
        this.loginType = type
        this.phoneNum = ''
        this.code = ''
        this.pwd = ''
        this.btnText = type == 1 ? '注册并登陆' : '登陆'
      },
      // 注册并登陆
      haneldRegister() {
        const _this = this
        let phoneTest = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
        if(!_this.phoneNum) {
          _this.$toast("请输入手机号")
          return false
        } else if (!phoneTest.test(_this.phoneNum)) {
          _this.$toast("请填写正确手机号")
          return false
        }

        if(_this.loginType == 1) {
          // 验证码登陆
          if (!_this.code) {
            _this.$toast("请填写验证码")
            return false
          } else {
            console.log(_this.phoneNum);
            console.log(_this.code);
            console.log(_this.pwd);
          }
        } else {
          // 账号登陆
          if(!_this.pwd) {
            _this.$toast("请填写密码")
            return false
          } else if (_this.pwd.length < 8) {
            _this.$toast("密码长度最少8位数")
            return false
          } else {
            console.log(_this.phoneNum);
            console.log(_this.code);
            console.log(_this.pwd);
          }
        }
      },
      toPage(name) {
        this.$router.push({
          name: name
        })
      },
    },
  }
</script>

<style scoped lang="scss">
  @import "../../assets/css/login.scss";
</style>
